<template>
    <div class="record-wrapper">
      <div class="top-wrapper">
        <div class="top-l">
          <div class="back-box"><img src="../../../static/images/back.png" @click="back"> <span class="top-title">{{topTitle}}</span></div>
        </div>
        <div class="top-c"></div>
      </div>

         <div class="top-con">
           <a v-if="userInfo.babyPhoto">
             <img :src="userInfo|filterSrc" class="portrait">
           </a>
           <a v-else>
             <img src="../../../static/images/babyBoy.png" class="portrait" v-if="userInfo.sex=='男' || userInfo.sex==0">
             <img src="../../../static/images/babyGirl.png" class="portrait" v-else>
           </a>
           <h4 class="name">{{userInfo.name}}</h4>
           <div class="record-switch">
             <a  :class="status==1?'active':''" @click="unauthorized">未认证记录</a>
             <a :class="status==2?'active':''" @click="authorized">已认证记录</a>
           </div>
           <a class="switch-btn" @click="switchPopup=true">切换</a>
         </div>

        <div class="unauthorized-list" >
          <ul v-if="unauthorizedList && length>0 ">
            <li v-for="(item,index) in unauthorizedList" :key="index">
              <div class="age-con">
                <div class="left">
                  <img src="../../../static/images/record/circle.png" class="circle">
                </div>
                <div class="right">
                  <span class="age">{{index}}个月</span>
                  <!--<div class="unauthorized-box">
                    <img src="../../../static/images/record/unauthorized.png" class="unauthorized-pic">
                    <span class="unauthorized-text">未认证</span>
                  </div>-->
                  <div class="vaccine-box">
                    <div class="vaccine-list" v-for="(group,groupIndex) in item" :key="groupIndex" @click="goVaccinate(group)">
                      <h4>{{group.vaccinateName||'--'}}</h4>
                      <p>
                        <!--{{group.inotime}}-->
                        <span v-if="">注射日期： {{$moment(group.inotime).format('YYYY-MM-DD')}}</span>
                        <span class="number">第{{group.dose}}剂/共{{group.totalDose}}剂</span>
                        <img src="../../../static/images/record/arrow-right.png" class="arrow-right">
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <div class="record-no-data" v-else>
            <img src="../../../static/images/record/record-no-data.png">
            <p>暂无记录</p>
          </div>
        </div>

      <div class="inoculation-con">
        <x-button @click.native="addRecord">新增异地接种记录</x-button>
      </div>
      <div style="height: 30px;"></div>

      <!--切换宝宝-->
      <div v-transfer-dom>
        <popup v-model="switchPopup" position="bottom" class="switch-popup">
          <div class="header">
            <h4>切换宝宝</h4>
            <img src="../../../static/images/record/close.png" class="close" @click="switchPopup=false">
          </div>
          <div class="con">
            <radio :options="radiobabyList"  v-model="radiobabyValue"  @on-change="radiobabyChange"></radio>
          </div>
        </popup>
      </div>

    </div>
</template>

<script>
  import { XButton, TransferDom, Popup ,Radio} from 'vux'
  import mixins from '@/mixins/mixins'
  import TopBar from '@/components/top';
  import url from '../../../config/app.config'

    export default {
        mixins: [mixins],
        metaInfo () {
          return {
            title: '接种记录'
          }
        },
        data(){
          return {
            status:1,
            switchPopup:false,
            radiobabyList:[],
            radiobabyValue:'0',

            noData:true,
            userInfo:{},
            userList:[],

            unauthorizedList:[],
            length:null,
            topTitle:'接种记录',

            userId:sessionStorage.getItem('userId'),
            height:document.documentElement.clientHeight,
          }
        },
      directives: {
        TransferDom
      },
      filters:{
        filterSrc(val){
          let p=url.http_url+'/'+val.babyPhoto;
          return p
        }
      },
      mounted(){
        this.userInfo=JSON.parse(sessionStorage.getItem('userInfo'));
        this.userList=JSON.parse(sessionStorage.getItem('children'));
        for(let i in this.userList){
          this.radiobabyList.push({
            key:this.userList[i].id,
            value:this.userList[i].name
          })
        }
        this.radiobabyValue=sessionStorage.getItem('childId');

        this.getRecord();
      },
      methods:{
        radiobabyChange(val){
          for(let i in this.userList){
            if(this.userList[i].id==val){
              this.userInfo=this.userList[i];
              sessionStorage.setItem('userInfo',JSON.stringify(this.userInfo));
              sessionStorage.setItem('childId',this.userInfo.id);
              if(this.status==1){
                this.unauthorized();
              }else{
                this.authorized();
              }
            }
          }
          this.switchPopup=false;

          this.$api.post('/userHandle/changeBaby',{
            id:this.userId,
            selectBaby:val
          }).then( (res)=> {

          })
        },
        addRecord(){
          this.$router.push({path:'/addrecord'})
        },
        back(){
          this.$router.push({path:'/index'})
        },
        getRecord(){
          this.$api.post('/vaccinationReservation/inoculateRecords',{
            babyId:sessionStorage.getItem('childId'),
            status:0   // 是否认证0否，1是
          }).then( (res)=> {
            if(res.data.result==0){
              if(res.data.obj){
                this.unauthorizedList=res.data.obj;
                let lengthNum=[];
                for(let i in res.data.obj){
                  lengthNum.push(i)
                }
                this.length=lengthNum.length;
              }
            }
          })
        },
        unauthorized(){
          this.status=1;
          this.getRecord();
        },
        authorized(){
          this.status=2;
          this.$api.post('/vaccinationReservation/inoculateRecords',{
            babyId:sessionStorage.getItem('childId'),
            status:1   // 是否认证0否，1是
          }).then( (res)=> {
            if(res.data.result==0){
              this.unauthorizedList=res.data.data;
              let lengthNum=[];
              for(let i in res.data){
                lengthNum.push(i)
              }
              this.length=lengthNum.length;
            }
          })
        },
        goVaccinate(val){
           this.$router.push({path: '/vaccinedetails',query:{vaccinecoding:val.vaccinecoding,isbyhand:val.isbyhand,vaccineCodes:val.vaccineCodes}})
        }
      },
      components: {
        XButton,
        Popup,
        Radio,
        TopBar
      }
    }
</script>

<style lang="scss">
    .record-wrapper{
      padding:10px 0 0;
      position: relative;
      background: #fff;
      .top-con{
        text-align: center;
        position: relative;
        .switch-btn{
          position: absolute;
          width:44px;
          height:22px;
          line-height: 22px;
          border:1px solid rgba(245,99,99,1);
          border-radius:10px;
          font-size:12px;
          font-family:PingFang-SC-Regular;
          font-weight:bold;
          color:rgba(245,99,99,1);
          top:10px;
          right: 15px;
        }
        .portrait{
          width:70px;
          height:70px;
          border-radius:50%;
          margin-bottom: 10px;
        }
        .name{
          font-size:18px;
          font-family:PingFang-SC-Bold;
          font-weight:bold;
          color:rgba(38,38,38,1);
        }
        .record-switch{
          margin-top:15px;
          a{
            width:100px;
            height:30px;
            line-height: 30px;
            display: inline-block;
            border:1px solid rgba(245,99,99,1);
            font-size:15px;
            color:rgba(245,99,99,1);
            &:nth-child(2){
              margin-left:-5px;
            }
            &.active{
              background:rgba(245,99,99,1);
              color:rgba(255,255,255,1);
            }
          }
        }
      }
      .unauthorized-list{
        padding:22px 15px 0 30px;
        margin-bottom: 70px;
        ul{
          position: relative;
          &:before{
            content: '';
            position: absolute;
            left: 8px;
            top: 14px;
            z-index: 0;
            width: 1px;
            height: 100%;
            background-color: #EAEAEA;
          }
          li{
            .age-con{
              margin:12px 0 0px;
              display: flex;
              .left{
                flex:0 0 20px;
                position: relative;
                .circle{
                  width:17px;
                  height: 17px;
                  position: absolute;
                  z-index: 20;
                  background: #fff;
                }
              }
              .right{
                flex: 1;
                .age{
                  font-size:15px;
                  font-weight:400;
                  color:rgba(38,38,38,1);
                }
              }
              .unauthorized-box{
                position: relative;
                display: inline-block;
                vertical-align: middle;
                .unauthorized-pic{
                  width:58px;
                  height: 22px;
                }
                .unauthorized-text{
                  position: absolute;
                  left:10px;
                  top:4px;
                  font-size:12px;
                  font-weight:400;
                  color:rgba(255,255,255,1);
                }
              }
            }
            .vaccine-box{
               margin-top:12px;
              .vaccine-list{
                background:rgba(247,245,245,1);
                border-radius:10px;
                margin-bottom: 10px;
                padding:15px;
                h4{
                  font-size:15px;
                  font-family:PingFang-SC-Regular;
                  font-weight:400;
                  color:rgba(38,38,38,1);
                  margin-bottom: 10px;
                }
                p{
                  font-size:12px;
                  font-family:PingFang-SC-Regular;
                  font-weight:400;
                  color:rgba(122,122,122,1);
                  .number{
                    margin-left:20px;
                  }
                  .arrow-right{
                    width:14px;
                    height: 15px;
                    float: right;
                  }
                }
              }
            }
          }
        }
        .record-no-data{
          text-align: center;
          padding-top:70px;
          img{
            width:187px;
            height: 125px;
          }
          p{
            height:25px;
            font-size:16px;
            font-family:PingFang-SC-Regular;
            font-weight:400;
            color:rgba(102,102,102,1);
            line-height:25px;
          }
        }
      }
      .inoculation-con{
        position: fixed;
        bottom: 20px;
        width:100%;
        z-index: 99;
        .weui-btn{
          background-color:#F56363;
          width:90%;
          margin:0 auto;
          box-shadow:0px 0px 10px 1px rgba(50,51,51,0.06);
          border-radius:24px;
          font-size:16px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(255,255,255,1);
        }
        .weui-btn_default:not(.weui-btn_disabled):active{
          color:rgba(255,255,255,1);
          background-color:#F56363;
        }
      }
    }
</style>
